<template>
<BhChart :options="chartOption"   :autoresize="autoResize" :width="width" :height="height"></BhChart>
</template>
<script setup lang="ts">
import { graphic} from 'echarts';
import useChartOption from "@/hooks/chart-option";
import { ToolTipFormatterParams } from '@/types/echarts';
//折线图
defineOptions({ name: 'BhChartBroken' });

interface SideObj {
  [key: string]: unknown;
}
interface Props {
  xAxis: string[], //横坐标数据
  chartsData: string[],//纵坐标数据
  autoResize?:Boolean,
  width?:string,
  height?:string,
}

const props = withDefaults(defineProps<Props>(), {
  xAxis: () =>[],
  chartsData: () => [],
  autoResize:  () =>true,
  width:  '100%',
  height: '100%',
})
//定义 grid
const gridObj =ref({
  left: '2.6%',
  right: '0',
  top: '10',
  bottom: '30',
})
//定义颜色
const  color= ref('#4E5969')
function graphicFactory(side: SideObj) {
  return {
    type: 'text',
    bottom: '8',
    ...side,
    style: {
      text: '',
      textAlign: 'center',
      fill: color.value,
      fontSize: 12,
    },
  };
}
const graphicElements = ref([
  graphicFactory({ left: '2.6%' }),
  graphicFactory({ right: 0 }),
]);

props.chartsData.forEach((el: any, idx: number) => {
  if (idx === props.chartsData.length - 1) {
    graphicElements.value[1].style.text = el;
  }
});
props.xAxis.forEach((el: any, idx: number) => {
  if (idx === 0) {
    graphicElements.value[0].style.text = el;
  }
});



const { chartOption } = useChartOption(() => {
  return {
    grid:gridObj.value,
    xAxis: {
      type: 'category',
      offset: 2,
      data: props.xAxis,
      boundaryGap: false,
      axisLabel: {
        color:color.value,
        formatter(value: number, idx: number) {
          if (idx === 0) return '';
          if (idx === props.xAxis?.length - 1) return '';
          return `${value}`;
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        interval: (idx: number) => {
          if (idx === 0) return false;
          if (idx === props.xAxis?.length - 1) return false;
          return true;
        },
        lineStyle: {
          color: '#E5E8EF',
        },
      },
      axisPointer: {
        show: true,
        lineStyle: {
          color: '#23ADFF',
          width: 2,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisLabel: {
        formatter(value: any, idx: number) {
          if (idx === 0) return value;
          return `${value}k`;
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#E5E8EF',
        },
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        const [firstElement] = params as ToolTipFormatterParams[];
        return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            <div class="content-panel"><span>总内容量</span><span class="tooltip-value">${(
            Number(firstElement.value) * 10000
        ).toLocaleString()}</span></div>
          </div>`;
      },
      className: 'echarts-tooltip-diy',
    },
    graphic: {
      elements: graphicElements.value,
    },
    series: [
      {
        data: props.chartsData,
        type: 'line',
        smooth: true,
        // symbol: 'circle',
        symbolSize: 12,
        emphasis: {
          focus: 'series',
          itemStyle: {
            borderWidth: 2,
          },
        },
        lineStyle: {
          width: 3,
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: 'rgba(30, 231, 255, 1)',
            },
            {
              offset: 0.5,
              color: 'rgba(36, 154, 255, 1)',
            },
            {
              offset: 1,
              color: 'rgba(111, 66, 251, 1)',
            },
          ]),
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(17, 126, 255, 0.16)',
            },
            {
              offset: 1,
              color: 'rgba(17, 128, 255, 0)',
            },
          ]),
        },
      },
    ],
  };
});

</script>


<style scoped lang="less">

</style>